//垂直居中
.flexC {
  display: flex;
  justify-content: center;
  align-items: center;
}
//两边对齐垂直居中
.flexS {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
// canvas 类名
#canvas{
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.weather {
  position: relative;
  overflow: hidden;

  &::before,
  &::after {
    content: '';
    position: absolute;
    left: -50%;
    top: -50%;
    right: -50%;
    bottom: -50%;
    z-index: 1;
    pointer-events: none;
    background: transparent repeat;
    opacity: 0.7;
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    transform: rotate(10deg);
    -webkit-animation-name: weather;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-name: weather;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

  &::after {
    opacity: 0.8;
    -webkit-animation-name: weather2;
    animation-name: weather2;
  }
}

.snow {
  &::after,
  &::before {
    background-image: url(/src/assets/img/contact/snow.png);
    -webkit-animation-duration: $sonw-before;
    animation-duration: $sonw-before;
  }

  &::after {
    -webkit-animation-duration: $sonw-after;
    animation-duration: $sonw-after;
  }
}
